<template>
  <!-- ref="appRef" -->
  <div id="index" >
    <div class="bg">
      <div class="host-body">
        <leftside />
        <div class="rightside">
          <headerBar />
          <div class="content scrolldiv">
            <router-view />
          </div>
        </div>
        <footerBar />
      </div>
      
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref,computed,reactive,onMounted,onUnmounted,} from 'vue'
import useDraw from '@/utils/useDraw'
import leftside from '@/components/layout/leftside.vue'
import headerBar from '@/components/layout/header.vue'
import footerBar from '@/components/layout/footer.vue'

export default defineComponent({
  components: {
    leftside,
    headerBar,
    footerBar
  },
  setup() {
    // * 加载标识
    const loading = ref<boolean>(true)
    const active = ref<number>(0)

    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })


    onUnmounted(() => {
      unWindowDraw()
    })

    // methods
    

    // return
    return {
      loading,
      active,
      appRef,
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
</style>
